<script lang="ts" setup>
import { QForm, QTable, type FormItemRows, type TableColums } from '@meetjs/element-plus-kit'
import { list } from '@/api/system/operlog/index'
import { getDicts } from '@/api/system/dict/index'
import type { IGetDictsRes } from '@/api/system/dict/type'
import type { OperLog, QueryParams } from '@/api//system/operlog/type.ts'
import EditDialog from './components/EditDialog.vue'
import { formatDate } from '@/utils/day'
// form
const formValue = ref<QueryParams & { daterange?: string[] }>({
	operIp: '',
	title: '',
	operName: '',
	businessType: '',
	status: '',
	daterange: []
})

const sysOperType = ref<IGetDictsRes>([])
const sysCommonStatus = ref<IGetDictsRes>([])

const formOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '操作地址',
		prop: 'operIp'
	},
	{
		type: 'input',
		label: '系统模块',
		prop: 'title'
	},
	{
		type: 'input',
		label: '操作人员',
		prop: 'operName'
	},
	{
		type: 'select',
		label: '操作类型',
		prop: 'businessType',
		options: [],
		attrs: {
			style: 'width: 200px'
		}
	},
	{
		type: 'select',
		label: '操作状态',
		prop: 'status',
		options: [],
		attrs: {
			style: 'width: 200px'
		}
	},
	{
		type: 'date-picker',
		prop: 'daterange',
		label: '操作时间',
		attrs: {
			type: 'daterange',
			startPlaceholder: '开始时间',
			endPlaceholder: '结束时间',
			valueFormat: 'YYYY-MM-DD HH:mm:ss'
		}
	}
])

// table
const loading = ref(false)
const page = ref({
	currentPage: 1,
	pageSize: 10,
	total: 0
})
const tableData = ref<OperLog[]>([])

const columns = ref<TableColums[]>([
	{
		type: 'index',
		label: '序号',
		align: 'center',
		width: 60
	},
	{
		label: '日志编号',
		prop: 'operId'
	},
	{
		label: '系统模块',
		prop: 'title'
	},
	{
		label: '操作类型',
		prop: 'businessType',
		type: 'slot'
	},
	{
		label: '操作人员',
		prop: 'operName',
		sortable: 'custom'
	},
	{
		label: '操作地址',
		prop: 'operIp'
	},
	{
		label: '操作状态',
		prop: 'status',
		type: 'slot'
	},
	{
		label: '操作日期',
		prop: 'operTime',
		sortable: 'custom',
		width: '160px',
		formatter: (row: OperLog) => formatDate(row.operTime)
	},
	{
		label: '消耗时间',
		prop: 'costTime',
		sortable: 'custom',
		formatter: (row: OperLog) => row.costTime + '毫秒'
	},
	{
		prop: 'action',
		fixed: 'right',
		label: '操作',
		width: 120,
		align: 'center'
	}
])

const getTableData = async () => {
	try {
		loading.value = true
		const params = {
			pageNum: page.value.currentPage,
			pageSize: page.value.pageSize,
			...formValue.value
		}

		// 处理时间范围
		if (formValue.value.daterange && formValue.value.daterange.length === 2) {
			params.beginTime = formValue.value.daterange[0]
			params.endTime = formValue.value.daterange[1]
			delete params.daterange
		}

		const res = await list(params)
		tableData.value = res.data.rows
		page.value.total = res.data.total
	} finally {
		loading.value = false
	}
}
const editDialogRef = useTemplateRef('editDialogRef')

const handleDetail = (row: OperLog) => {
	editDialogRef.value?.init(row)
}

const init = () => {
	getDicts('sys_sys_oper_type').then(data => {
		sysOperType.value = data
		formOptions.value[3].options = data
	})
	getDicts('sys_sys_common_status').then(data => {
		sysCommonStatus.value = data
		formOptions.value[4].options = data
	})
}

onMounted(() => {
	init()
	getTableData()
})
</script>
<template>
	<div class="table-page-box">
		<div class="filter-box">
			<QForm
				inline
				:model="formValue"
				:form-options="formOptions"
				:buttons="['search', 'reset']"
				@search="getTableData"
				@reset="getTableData"
			/>
		</div>
		<div class="table-box">
			<QTable
				:data="tableData"
				:columns="columns"
				:page="page"
				:loading="loading"
				style="width: 100%"
				@pageChange="getTableData"
			>
				<template #businessType="{ row }">
					<DictTag
						:options="sysOperType"
						:value="row.businessType"
					/>
				</template>
				<template #status="{ row }">
					<DictTag
						:options="sysCommonStatus"
						:value="row.status"
					/>
				</template>
				<template #action="{ row }">
					<el-button
						type="primary"
						link
						@click="handleDetail(row)"
					>
						详情
					</el-button>
				</template>
			</QTable>
			<EditDialog
				ref="editDialogRef"
				:sys-oper-type="sysOperType"
			/>
		</div>
	</div>
</template>
